<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<#include "./../common/header.html"/>
</head>
<body class="easyui-layout">
	<table id="dg" class="easyui-datagrid" title="实时报警策略" style="width:100%;height:98%"
			data-options="
				iconCls: 'icon-ok',
				singleSelect: true,
				toolbar: '#tb',
				url:'${ctx}/pattern/loadPattern'
			">
		<thead>
			<tr>
				<th data-options="field:'patternName',width:100">名称</th>
				<th data-options="field:'pattern',width:250">匹配规则</th>
<!-- 				<th data-options="field:'mobile',width:100">报警接收手机</th> -->
				<th data-options="field:'email',width:200">email</th>
				<th data-options="field:'intervalMinutes',width:100">报警频率(分钟)</th>
				<th data-options="field:'valid',width:50">是否开启</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="height:auto">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add_dlg()">添加规则</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="deleteRows()">删除规则</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editRows()">修改规则</a>
	</div>

	<div id="add_dlg" class="easyui-dialog" closed="true" data-options="width:600,height:500">
		<div style="padding:10px 60px 20px 60px">
			<form id="ff" method="post" action="${ctx}/pattern/addPattern">
				<input type="hidden" name="_id"/>
				<input type="hidden" name="pattern" id="pattern"></input>
				<table cellpadding="10" width="100%">
					<tr>
						<td>名称</td>
						<td><input class="easyui-textbox" type="text" name="patternName" data-options="required:true" style="width:200px"></input></td>
					</tr>
					
					<tr>
						<td>匹配规则(从下面选择)</td>
						<td><span id="patternSpan"></span></td>
					</tr>
					<tr>
						<td>--apiMethod
							<select id="methodOp">
								<option value="">全部</option>
								<option value="like">正则</option>
								<option value="eq">相等</option>
							</select>
						</td>
						<td><input type="text" id="methodPattern" data-options="required:true" style="width:200px"></input></td>
					</tr>
					<tr>
						<td>--渠道
							<select id="channelOp">
								<option value="">全部</option>
								<option value="like">正则</option>
								<option value="eq">相等</option>
							</select>
						</td>
						<td><input type="text" id="channelPattern" data-options="required:true" style="width:200px"></input></td>
					</tr>
					
					<tr>
						<td>--异常
							<select id="exceptionOp">
								<option value="">全部</option>
								<option value="like">正则</option>
							</select>
						</td>
						<td><input type="text" id="exceptionPattern" data-options="required:true" style="width:200px"></input></td>
					</tr>
					<tr>
						<td>报警邮件(多个以,分隔):</td>
						<td>
						
						<input class="easyui-textbox" type="text" name="email" data-options="required:true" style="width:200px"></input></td>
					</tr>
<!-- 					<tr> -->
<!-- 						<td>报警手机(多个以,分隔):</td> -->
<!-- 						<td><input class="easyui-textbox" type="text" name="mobile" data-options="validType:'mobile'" style="width:200px"></input></td> -->
<!-- 					</tr> -->
					<tr>
						<td>报警频率(分钟,0表示不限制):</td>
						<td><input class="easyui-textbox" type="text" name="intervalMinutes" data-options="required:true,validType:'number'" style="width:200px"></input></td>
					</tr>
					<tr>
						<td>是否开启</td>
						<td>
							是<input class="easyui-radio" type="radio" name="valid" value="true" />&nbsp;&nbsp;
							否<input class="easyui-radio" type="radio" name="valid" value="false" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
					
</body>

<script>
$('#methodOp,#channelOp,#exceptionOp').change(function() {
	setPatternValue();
});
$('#methodPattern,#channelPattern,#exceptionPattern').blur(function() {
	setPatternValue();
});

function setPatternValue() {
	var methodOp = $('#methodOp').val();
	var channelOp = $('#channelOp').val();
	var exceptionOp = $('#exceptionOp').val();
	
	var methodPattern = $('#methodPattern').val();
	var channelPattern = $('#channelPattern').val();
	var exceptionPattern = $('#exceptionPattern').val();
	
	var patternStr = '';
	if (methodOp != '' && methodPattern != '') {
		patternStr += 'method ' + methodOp + ' ' + methodPattern + ':::';
	}
	if (channelOp != '' && channelPattern != '') {
		patternStr += 'channel ' + channelOp + ' ' + channelPattern + ':::';
	}
	if (exceptionOp != '' && exceptionPattern != '') {
		patternStr += 'exception ' + exceptionOp + ' ' + exceptionPattern + ':::';
	}
	
	if (patternStr != '') {
		patternStr = patternStr.substring(0, patternStr.length-3);
	}
	$('#pattern').val(patternStr);
	$('#patternSpan').html(patternStr);
}

function add_dlg(){

	$("#ff").attr('action', '${ctx}/pattern/addPattern');
	$('#add_dlg').dialog({
		title:'添加实时报警策略',
		closed: false,
		cache: false,
		buttons:[{ 
			text:'提交', 
			iconCls:'icon-ok',
		
			handler:function(){
				
				$("#add_dlg").find('#ff').form('submit',{
					
					onSubmit:function(){
						setPatternValue();
						var flag = $(this).form('validate');
						return flag;
					},
					dataType:"json",
					success : function(response) {
						if(response=='true'){
							$.messager.alert({
								title : '提示',
								msg : "操作成功"
							});
						}
					
						$('#add_dlg').dialog('close');
						$('#dg').datagrid('reload'); 
					}
				});
				
			} 
		},{ 
			text:'关闭', 
			handler:function(){ 
				$('#add_dlg').dialog('close');
			} 
		}], 
		onOpen:function(){ 
			//$('#add_contentt_dlg_{$rbtId}').dialog('refresh', '__URL__/toAddInfoForm&rbtId={$rbtId}'); 
		} 
	});
	
}
function deleteRows(){
	var row = $("#dg").datagrid('getSelected'); 
	if(row!=null){
		$.messager.confirm('删除?', '确认删除?', function(r){
			if(r){
				$.ajax({ url: "${ctx}/pattern/delPattern?id="+row._id, success: function(response){
					var data= $.parseJSON(response); 
					if(response==true){
						$("#dg").datagrid('reload');
					}
					$.messager.alert({
						title : '提示',
						msg : "操作成功"
					});
				}});
			}

		});
	
	} else {
		$.messager.alert({
			title : '提示',
			msg : "请选择一行"
		});
	}
}

function editRows(){
	var row = $("#dg").datagrid('getSelected'); 
	if(row!=null){
		
		$("#ff").attr('action', '${ctx}/pattern/updatePattern');
		$('#ff').form('load',row);
		$('#add_dlg').dialog({
			title:'查看详情',
			closed: false,
			cache: false,
			buttons:[{ 
				text:'提交', 
				iconCls:'icon-ok',
			
				handler:function(){
					$("#add_dlg").find('#ff').form('submit',{
						onSubmit:function(){
							
							setPatternValue();
							var flag = $(this).form('validate');
							return flag;
						},
						dataType:"json",
						success : function(response) {
							if(response=='true'){
								$.messager.alert({
									title : '提示',
									msg : "操作成功"
								});
							}
						
							$('#add_dlg').dialog('close');
							$('#dg').datagrid('reload'); 
						}
					});
					
				} 
			},{ 
				text:'关闭', 
				handler:function(){ 
					$('#add_dlg').dialog('close');
				} 
			}] 
		});
	} else {
		$.messager.alert({
			title : '提示',
			msg : "请选择一行"
		});
	}
	
}
</script>
</html>